<template>
  <div class="home">
    <div class="menu">
      <div class="title">
        <img src="../assets/images/蒙版组 2.png" alt="" />
        <div class="title_word">玉林市业务制作系统</div>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          :label="r.label"
          :name="r.name"
          v-for="r in datas"
          v-bind:key="r"
        >
          <li
            v-for="c in r.children"
            v-bind:key="c"
            @click="addTab(editableTabsValue, c)"
            :class="res == c.label ? 'active' : ''"
          >
            <img src="../assets/images/组 38.png" alt="" />
            <div class="small_menu_title">
              {{ c.label }}
            </div>
          </li>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!--左抽屉-->
    <el-drawer
      :visible.sync="drawer"
      :modal="false"
      :wrapperClosable="false"
      :direction="direction"
      :before-close="handleClose"
      class="left_drawer"
    >
      <div class="daily_contain">
        <div class="left_list">
          <!-- <div class="list_title">预警监控信息</div> -->
          <div class="list_menu">
            <div v-if="type == '报警信息'">
              <Tab />
            </div>
            <div v-if="type == '文档制作'">
              <Doc />
            </div>
            <div v-if="type == '历史资料'">
              <HistoricalData />
            </div>
            <div v-if="type == '环境监测'">
              <Monitor />
            </div>
            <div v-if="type == '气象监测'">
              <Meteorological />
            </div>
            <div v-if="type == '气象预报产品'">
              <ForeacstProduction />
            </div>
            <div v-if="type == '环境预报产品'">
              <EnvirProduction />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!--右抽屉-->
    <el-drawer
      :visible.sync="RightdDrawer"
      :modal="false"
      :wrapperClosable="false"
      :direction="Rightd_direction"
      :before-close="handleClose"
      class="right_drawer"
    >
      <div class="daily_contain">
        <div class="left_list">
          <div class="list_menu">
            <div v-if="type == '城镇预报'">
              <CountryForest />
            </div>
            <div v-if="type == '乡镇预报'">
              <DetailForest />
            </div>
            <div v-if="type == '区域自动站'">
              <AutoStation />
            </div>
            <div v-if="type == '雷达图'">
              <Ledar />
            </div>
            <div v-if="type == '组网雷达'">
              <NetLedar />
            </div>
            <div v-if="type == '卫星云图'">
              <SatelliteCloud />
            </div>
            <div v-if="type == '精细化网格'">
              <Grid />
            </div>
            <div v-if="type == '预警信号'">
              <Warning />
            </div>
            <div v-if="type == '预报制作'">
              <Forecast />
            </div>
            <div v-if="type == '短临预警'">
              <ShortL />
            </div>
            <div v-if="type == '短期预警'">
              <ShortQ />
            </div>
            <div v-if="type == '中短期预警'">
              <MidShortQ />
            </div>
            <div v-if="type == '长期预警'">
              <LongQ />
            </div>
            <div v-if="id == '1'">
              <WarningSend />
            </div>
            <div v-if="id == '2'">
              <WarningQuery />
            </div>

            <div v-if="type == '应急服务'">
              <Services />
            </div>
            <div v-if="type == '灾点管理'">
              <pointManagemnt />
            </div>
            <div v-if="type == '灾点查询'">
              <PointQuery />
            </div>
            <div v-if="type == '灾点统计'">
              <PointCount />
            </div>
            <div v-if="type == '模型管理'">
              <Model />
            </div>
            <div v-if="type == '地质分析'">
              <Geological />
            </div>
            <div v-if="type == '火险预报'">
              <FireForecast />
            </div>
            <div v-if="type == '火险发布'">
              <FireSend />
            </div>
            <div v-if="type == '火险历史'">
              <FireHistory />
            </div>
            <div v-if="type == '火源点'">
              <FirePoint />
            </div>
            <div v-if="type == '病虫害预报'">
              <InsectPest />
            </div>
            <div v-if="type == '林业病虫害库'">
              <InsectPest />
            </div>
            <div v-if="type == '历史火灾查询'">
              <HistoryFireQuery />
            </div>
            <div v-if="type == '应急历史'">
              <History />
            </div>
            <div v-if="type == '城市火险'">
              <Fires />
            </div>
            <div v-if="type == '山洪预警'">
              <FloodWarning />
            </div>
            <div v-if="id == '3'">
              <Release />
            </div>
            <div v-if="type == '预警查询'">
              <Alert />
            </div>
            <div v-if="type == '灾点查询'">
              <Disaster />
            </div>
            <div v-if="type == '历史灾情'">
              <HistoricalDisaster />
            </div>
            <div v-if="type == '内涝等级预报'">
              <FloodLevel />
            </div>
            <div v-if="type == '内涝历史'">
              <FloodHistory />
            </div>
            <div v-if="type == '汇水区管理'">
              <Catchment />
            </div>
            <div v-if="type == '面雨量分析'">
              <Rainfall />
            </div>
            <div v-if="type == '雨情'">
              <Condition />
            </div>
            <div v-if="type == '防汛预案'">
              <Prevention />
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <div class="other">
      <!--弹窗-->
      <el-dialog :title="type" :visible.sync="dialogVisible" width="50%">
        <div class="dialog_box">
          <div v-if="type == '专题服务'">
            <Service />
          </div>
          <div v-if="type == '历史火灾编辑'">
            <HistoryFire />
          </div>
          <div v-if="type == '因子设置'">
            <Factor />
          </div>
          <div v-if="type == '内涝点管理'">
            <FloodPoint />
          </div>
        </div>
      </el-dialog>
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        @tab-remove="removeTab"
        id="par"
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :closable="item.closable"
        >
          <tab-component :is="item.content"></tab-component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { arr } from "../../data";
import Tab from "../components/Tab.vue";
import Map from "../components/Map.vue";
import Daily from "../views/Daily_business/Daily/daily.vue";
import Document from "../views/ForecastProduction/Forecast/Document.vue";
import CountryForest from "../components/QXXX/CountryForest.vue";
import DetailForest from "../components/QXXX/DetailForest.vue";
import AutoStation from "../components/QXXX/AutoStation.vue";
import Ledar from "../components/QXXX/Ledar.vue";
import NetLedar from "@/components/QXXX/NetLedar.vue";
import SatelliteCloud from "@/components/QXXX/SatelliteCloud.vue";
import HistoricalData from "@/components/QXXX/HistoricalData.vue";
import Grid from "../components/QXXX/Grid.vue";
import Warning from "../components/QXXX/Warning.vue";
import ShortL from "@/components/DZZH/ShortL.vue";
import ShortQ from "@/components/DZZH/ShortQ.vue";
import MidShortQ from "@/components/DZZH/MidShortQ.vue";
import LongQ from "@/components/DZZH/LongQ.vue";
import WarningSend from "@/components/DZZH/WarningSend.vue";
import WarningQuery from "@/components/DZZH/WarningQuery.vue";
import Doc from "../components/ForecastProduction/Document.vue";
import Services from "../components/EmergencyMeteorology/EmergencyServices.vue";
import Historical from "../views/MeteorologicalInformation/Meteorological/HistoricalData.vue";
import Forecast from "../components/ForecastProduction/ForecastProduction.vue";
import pointManagemnt from "@/components/DZZH/PointManagement .vue";
import PointQuery from "@/components/DZZH/PointQuery.vue";
import PointCount from "@/components/DZZH/PointCount.vue";
import Model from "@/components/DZZH/Model.vue";
import Geological from "@/components/DZZH/Geological.vue";
import FireForecast from "@/components/SLHZ/FireForecast.vue";
import FireSend from "@/components/SLHZ/FireSend.vue";
import FireHistory from "@/components/SLHZ/FireHistory.vue";
import FirePoint from "@/components/SLHZ/FirePoint.vue";
import InsectPest from "@/components/SLHZ/InsectPest.vue";
import ForestryPests from "../views/ForestFire/Fire/ForestryPests.vue";
import HistoryFire from "../components/SLHZ/HistoryFire.vue";
import Service from "@/components/SLHZ/Services.vue";
import HistoryFireQuery from "@/components/SLHZ/HistoryFireQuery.vue";
import History from "../components/EmergencyMeteorology/EmergencyHistory.vue";
import Fires from "../components/EmergencyMeteorology/UrbanFires.vue";
import FloodWarning from "../components/TorrentialFlood/FloodWarning.vue";
import Release from "../components/TorrentialFlood/WarningRelease.vue";
import Alert from "../components/TorrentialFlood/AlertQuery.vue";
import Disaster from "../components/TorrentialFlood/DisasterQuery.vue";
import HistoricalDisaster from "../components/TorrentialFlood/HistoricalDisaster.vue";
import FloodLevel from "@/components/CSNL/FloodLevel.vue";
import FloodHistory from "@/components/CSNL/FloodHistory.vue";
import Factor from "@/components/CSNL/Factor.vue";
import FloodPoint from "@/components/CSNL/FloodPoint.vue";
import Catchment from "@/components/CSNL/Catchment.vue";
import Rainfall from "../components/TorrentialFlood/RainfallAnalysis.vue";
import Condition from "../components/TorrentialFlood/RainCondition.vue";
import Prevention from "../components/TorrentialFlood/FloodPrevention.vue";
import Monitor from "@/components/HJQX/Monitor.vue";
import Meteorological from "@/components/HJQX/Meteorological.vue";
import ForeacstProduction from "@/components/HJQX/ForeacstProduction.vue";
import EnvirProduction from "@/components/HJQX/EnvirProduction.vue";

export default {
  data() {
    return {
      activeName: "first",
      datas: arr,
      drawer: false,
      RightdDrawer: false,
      direction: "ltr",
      Rightd_direction: "rtl",
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "地图",
          name: "1",
          content: "Map",
          closable: false,
        },
      ],
      tabIndex: 1,
      type: "",
      id: "",
      res: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(done) {
      done();
      if (this.drawer) {
        let e = document.getElementById("par").firstChild;
        e.style.paddingLeft = "400px";
        let a = document.getElementById("par").lastChild;
        a.style.paddingLeft = "400px";
      } else {
        let e = document.getElementById("par").firstChild;
        e.style.paddingLeft = "0";
        let a = document.getElementById("par").lastChild;
        a.style.paddingLeft = "0";
      }
    },
    addTab(targetName, c) {
      this.res = c.label;
      this.type = c.label;
      this.id = c.id;
      this.dialogVisible = c.pop;
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: c.label,
        name: newTabName,
        content: c.content,
        closable: true,
      });
      this.editableTabsValue = newTabName;
      //左抽屉
      this.drawer = c.drawer;
      if (this.drawer) {
        let e = document.getElementById("par").firstChild;
        e.style.paddingLeft = "400px";
      } else {
        let e = document.getElementById("par").firstChild;
        e.style.paddingLeft = "0";
      }

      this.RightdDrawer = c.RightdDrawer;
      //移动中间区域

      if (this.drawer && this.RightdDrawer) {
        let a = document.getElementById("par").lastChild;
        a.style.paddingRight = "400px";
        a.style.paddingLeft = "400px";
      }
      if (!this.drawer && !this.RightdDrawer) {
        let a = document.getElementById("par").lastChild;
        a.style.paddingRight = "0px";
        a.style.paddingLeft = "0px";
      }
      if (this.drawer && !this.RightdDrawer) {
        let a = document.getElementById("par").lastChild;
        a.style.paddingRight = "0px";
        a.style.paddingLeft = "400px";
      }
      if (!this.drawer && this.RightdDrawer) {
        let a = document.getElementById("par").lastChild;
        a.style.paddingRight = "400px";
        a.style.paddingLeft = "0px";
      }
      //重定向地图
      if (c.editableTabsValue) {
        this.editableTabsValue = c.editableTabsValue;
        this.editableTabs.splice(this.editableTabs.length - 1, 1);
      }
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
  mounted() {
    console.log(this.datas);
  },
  components: {
    Tab,
    Map,
    Daily,
    CountryForest,
    DetailForest,
    AutoStation,
    Ledar,
    Doc,
    NetLedar,
    SatelliteCloud,
    HistoricalData,
    Historical,
    Grid,
    Warning,
    ShortL,
    ShortQ,
    MidShortQ,
    LongQ,
    WarningSend,
    WarningQuery,
    Services,
    Forecast,
    Document,
    pointManagemnt,
    PointQuery,
    PointCount,
    Model,
    Geological,
    FireForecast,
    FireSend,
    FireHistory,
    FirePoint,
    InsectPest,
    ForestryPests,
    Service,
    HistoryFire,
    HistoryFireQuery,
    History,
    Fires,
    FloodWarning,
    Release,
    Alert,
    Disaster,
    HistoricalDisaster,
    FloodLevel,
    FloodHistory,
    Factor,
    FloodPoint,
    Catchment,
    Rainfall,
    Condition,
    Prevention,
    Monitor,
    Meteorological,
    ForeacstProduction,
    EnvirProduction,
  },
};
</script>
<style scoped lang="less">
.home {
  height: 100%;
  width: 100%;
  // position: absolute;
}
.active {
  border: 1px solid #0c1f7b;
}
// .el-dialog {
//   z-index: 1000000000000000000000000000;
// }

.menu {
  width: 100%;
  height: 60px;
  background-color: #1c3e7d;
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 99999;
}

.menu .title {
  width: 250px;
  height: 45px;
  background-color: #fff;
  border-radius: 30px;
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu .title img {
  width: 45px;
  height: 40px;
}

.menu .title .title_word {
  font-size: 18px;
  font-weight: 900;
  color: #1c3e7d;
}

.home .home_container {
  width: 100%;
  height: 60px;
}

.menu .el-tabs {
  width: 100%;
  position: absolute;
  top: 20px;
  right: 0;
}

.menu /deep/ .el-tabs__header .is-top {
  background-color: transparent;
}

.menu /deep/ .el-tabs__header {
  margin: 0;
}

.menu /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
  float: right !important;
  border: none;
  border-bottom: 2px solid rgb(203, 210, 220);
  margin-right: 10px;
}

.menu /deep/ .el-tabs__item {
  color: #fff;
  font-weight: 900;
  border-left: none !important;
  line-height: 34px;
  padding: 0 6px 6px 6px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  background-color: #1c3e7d;
}

.menu
  /deep/
  .el-tabs--top.el-tabs--card
  > .el-tabs__header
  .el-tabs__item:last-child {
  padding-right: 6px;
}

.menu
  /deep/
  .el-tabs--top.el-tabs--card
  > .el-tabs__header
  .el-tabs__item:nth-child(2) {
  padding-left: 6px;
}

.menu /deep/ .el-tabs__item.is-active {
  color: #1c3e7d;
  background-color: #fff !important;
}

.menu /deep/ .el-tabs__content {
  height: 60px;
  border-bottom: 2px solid rgba(203, 210, 220, 0.4);
}

.menu .el-tabs .el-tab-pane {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
}

.menu .el-tabs .el-tab-pane li {
  height: 50px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  color: #0c1f7b;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.menu .el-tabs .el-tab-pane li img {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.other /deep/ .el-tabs__header {
  margin: 0;
}
// .other .el-tabs__content {
//   overflow-y: auto;
// }
.left_drawer {
  width: 400px;
  height: calc(100% - 124px);
  top: auto;
  right: auto;
  z-index: 99999999999 !important;
  border-right: 1px solid #dedede;
}

.left_drawer /deep/ .el-drawer.ltr {
  width: 100% !important;
}

.right_drawer {
  width: 400px;
  height: calc(100% - 124px);
  top: auto;
  left: auto;
  z-index: 99999999999 !important;
}
/deep/.right_drawer::-webkit-scrollbar {
  display: none;
}
.right_drawer /deep/ .el-drawer.rtl {
  width: 100% !important;
}
</style>
